<template>
  <van-row>
    <van-nav-bar title="webSql使用" left-text="返回" left-arrow @click-left="onClickLeft">
    </van-nav-bar>
    <van-row class="side-nav">
      <h1 class="vant-title">
        <img src="https://img.yzcdn.cn/vant/logo.png">
        <span>WebSQL</span>
      </h1>
      <van-row>
        <h5>WebSQL</h5>
        <van-button type="default" @click="createDateBase">创建数据库</van-button>
        <van-button type="default" @click="createTable">创建表</van-button>
        <van-button type="default" @click="insertData">插入数据</van-button>
        <van-button type="default" @click="queryData">查询数据</van-button>
        <van-button type="default" @click="delData">删除数据</van-button>
        <van-button type="default" @click="updateDate">更新数据</van-button>

      </van-row>
    </van-row>
  </van-row>

</template>

<script>
import { Toast } from 'vant'

export default {
  name: 'Icon',
  data () {
    return {
      dataBase: null
    }
  },
  methods: {
    createDateBase () {
      var dataBase = window.openDatabase('websql', '', 'litemall', 4 * 1024 * 1024, function () {
        Toast('创建数据库成功')
      })
      this.dataBase = dataBase
    },
    createTable () {
      var tableName = 'websqlTable'
      // 这里定一个变量来存建表相关信息，并声明主键，需要存储的字段及格式（NAME、AGE、HEIGHT、WEIGHT）
      var creatTableSQL = 'CREATE TABLE IF  NOT EXISTS ' + tableName + ' (rowid INTEGER PRIMARY KEY AUTOINCREMENT, NAME text,AGE text,HEIGHT text,WEIGTH text)'
      this.dataBase.transaction(function (ctx, result) {
        ctx.executeSql(creatTableSQL, [], function (ctx, result) {
          Toast('表创建成功 ' + tableName)// 建表成功
        }, function (tx, error) {
          Toast('创建表失败:' + tableName + error.message)// 建表失败
        })
      })
    },
    insertData () {
      this.websqlInsterDataToTable('websqlTable', '小红', '18', '175cm', '40kg')
      this.websqlInsterDataToTable('websqlTable', '小黄', '17', '180cm', '45kg')
      this.websqlInsterDataToTable('websqlTable', '小蓝', '19', '185cm', '70kg')
      this.websqlInsterDataToTable('websqlTable', '小绿', '19', '175cm', '60kg')
      this.websqlInsterDataToTable('websqlTable', '小青', '21', '162cm', '52kg')
      this.websqlInsterDataToTable('websqlTable', '小紫', '25', '195cm', '80kg')
    },
    queryData () {
      this.websqlGetAllData('websqlTable')
    },
    delData () {
      this.websqlDeleteADataFromTable('websqlTable', '小蓝')
    },
    updateDate () {
      this.websqlUpdateAData('websqlTable', '小红', '1000')
    },
    onClickLeft () {
      this.$router.go(-1)
    },
    websqlGetAllData (tableName) {
      var selectALLSQL = 'SELECT * FROM ' + tableName
      this.dataBase.transaction(function (ctx) {
        ctx.executeSql(selectALLSQL, [], function (ctx, result) {
          Toast('查询成功: ' + tableName + result.rows.length)
          var len = result.rows.length
          for (var i = 0; i < len; i++) {
            console.log('NAME = ' + result.rows.item(i).NAME)
            console.log('AGE = ' + result.rows.item(i).AGE)
            console.log('HEIGHT = ' + result.rows.item(i).HEIGHT)
            console.log('WEIGTH = ' + result.rows.item(i).WEIGTH)
            console.log('-------- 我是分割线 -------')
          }
        },
        function (tx, error) {
          Toast('查询失败: ' + error.message)
        })
      })
    },
    websqlInsterDataToTable (tableName, NAME, AGE, HEIGHT, WEIGTH) {
      var insterTableSQL = 'INSERT INTO ' + tableName + ' (NAME,AGE,HEIGHT,WEIGTH) VALUES (?,?,?,?)'
      this.dataBase.transaction(function (ctx) {
        ctx.executeSql(insterTableSQL, [NAME, AGE, HEIGHT, WEIGTH], function (ctx, result) {
          Toast('插入' + tableName + NAME + '成功')
        },
        function (tx, error) {
          Toast('插入失败: ' + error.message)
        })
      })
    },
    websqlDeleteADataFromTable (tableName, name) {
      var deleteDataSQL = 'DELETE FROM ' + tableName + ' WHERE NAME = ?'
      localStorage.removeItem(tableName)
      this.dataBase.transaction(function (ctx, result) {
        ctx.executeSql(deleteDataSQL, [name], function (ctx, result) {
          Toast('删除成功 ' + tableName + name)
        }, function (tx, error) {
          Toast('删除失败:' + tableName + name + error.message)
        })
      })
    },
    websqlUpdateAData (tableName, name, age) {
      var updateDataSQL = 'UPDATE ' + tableName + ' SET AGE = ? WHERE NAME = ?'
      this.dataBase.transaction(function (ctx, result) {
        ctx.executeSql(updateDataSQL, [age, name], function (ctx, result) {
          Toast('更新成功 ' + tableName + name)
        }, function (tx, error) {
          Toast('更新失败:' + tableName + name + error.message)
        })
      })
    }
  }
}
</script>

<style scoped>
  .van-doc-demo-block__title{
    margin: 0;
    font-weight: 400;
    font-size: 14px;
    color: rgba(69,90,100,.6);
    text-align: left;
  }
  .side-nav{
    box-sizing: border-box;
    width: 100%;
    padding: 64px 10px 10px;
  }
  .side-nav .vant-desc{
    margin: 0 0 40px;
    color: #7d7e80;
    font-size: 14px;
    text-align: left;
  }
  .vant-title{
    font-weight: normal;
    -webkit-user-select: none;
    user-select: none;
    margin: 0 0 16px;
    text-align: left;
  }
  .side-nav .vant-title img {
    width: 36px;
  }
  .van-cell__title{
    text-align: left;
  }
  .comment{
    margin: 10px 0px;
  }
  .getPhoto{
    width: 100%;
  }
  #myImage{
    width: 100%;
  }
</style>
